<template>
	<a-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-card :bordered="false">
			<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true" :showPagination="false"
				:rowKey="(record) => record.code" :rowSelection="null">
				<span slot="materialModelNumber" slot-scope="text, record">
					{{ record.material ? record.material.materialModelNumber : '' }}
				</span>
				<!-- <span slot="image" slot-scope="text">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
			</s-table>
		</a-card>
	</a-modal>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";

import { STable } from '@/components'
import {
	page,
} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'


@Component({
	components: {
		STable,
	}
})


export default class BackStoreOrderDetailModal extends Vue {
	@Ref() readonly table!: any

	visible = false
	title = '退库单详情'
	confirmLoading = false
	queryParam = {
		orderId: '',
		orderType: '',
		pageSize: undefined,
	}


	emsOrder = {}
	columns = [

		{
			align: 'center',
			title: '产品',
			dataIndex: '',
			customRender() {
				return '/'
			}
		}, {
			align: 'center',
			title: 'BOM',
			dataIndex: '',
			customRender() {
				return '/'
			}
		}, {
			title: '物料',
			dataIndex: 'materialName'
		}, {
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		}, {
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		}, {
			title: '物号',
			dataIndex: 'materialCode'
		}, {
			title: '关联单号',
			dataIndex: 'ckOrderNumber'
		},
		{
			title: '正常退库数量',
			dataIndex: 'number'
		}, {
			title: '额外退库数量',
			dataIndex: 'extraNumber'
		},

	]


	// 加载数据方法 必须为 Promise 对象
	loadData(parameter: { pageNo: number, pageSize: number }) {
		const params = {
			...parameter,
			...this.queryParam,
		}
		return page(params).then((res) => {
			return res.data
		})
	}

	show(record) {
		this.visible = true
		this.emsOrder = record
		this.queryParam.orderId = record.orderId
		this.queryParam.pageSize = -1

		setTimeout(() => {
			this.handleOk()
		}, 100)
	}


	handleOk() {
		this.table.refresh()
	}

	handleSubmit() {
		this.visible = false
	}

	handleCancel() {
		this.visible = false
	}


}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
